<template>
	<view>

		<view class="my" @touchmove.stop.prevent="" @touchend="end">
			<u-popup ref="downDrapBox" :round="20" :show="downDrapBoxType" mode="bottom"
				@close="downDrapBoxType = false">
				<view class="contents" v-if="JSON.stringify(vitalityData) !== '{}'">
					 <!--   -->
					<view class="suspension">
						<view class="fonts">
							下拉进入设备操作
						</view>
						<view class="uIcons">
							<u-icon name="arrow-right-double" color="#ffffff" width="50" size="20"></u-icon>
						</view>
					</view>
					<view class="progressBar"
						:style="(temperature < 45 || temperature > 59) && pageTime >= 240 ? 'margin-bottom: 40rpx;' : 'margin-bottom: 120rpx;'">
						<!-- <view class="progressBars"
									v-if="vitalityData.score.current_score != null && vitalityData.score.max_score != null">
									<view class="fontText">
										可获得元气
										{{vitalityData.score.current_score.toFixed(2)}}/{{vitalityData.score.max_score.toFixed(2)}}
									</view>
									<view class="progress">
										<u-line-progress
											:percentage="Math.round(vitalityData.score.current_score / vitalityData.score.max_score * 10000) / 100.00"
											:showText="false" :activeColor="'linear-gradient(90deg, #89D1F5 0%, #C4EFFA 100%)'" />
									</view>
								</view> -->
						<view class="progressBars"
							v-if="vitalityData.power.current_power != null && vitalityData.power.max_power != null">
							<view class="fontText">
								可消耗能量
								{{vitalityData.power.current_power.toFixed(2)}}/{{vitalityData.power.max_power.toFixed(2)}}
							</view>
							<view class="progress">
								<u-line-progress
									:percentage="Math.round(vitalityData.power.current_power / vitalityData.power.max_power * 10000) / 100.00"
									:showText="false"
									:activeColor="'linear-gradient(90deg, #89D1F5 0%, #C4EFFA 100%)'" />
							</view>
						</view>
					</view>
					<view v-if="(temperature < 45 || temperature > 59) && pageTime >= 180">
						<view class="equipmentBck "
							:class="temperature < 45 ? 'equipmentBckWarning' : temperature > 59 ? 'equipmentBckError' :''">
							<u-icon v-if="temperature < 45" name="warning" color="#f9ae3d" size="28"></u-icon>
							<u-icon v-else-if="temperature > 59" name="close-circle" color="'#f56c6c'" size="28">
							</u-icon>
							<view class="text">
								<view v-show="temperature < 45">
									设备温度不足 无法获得元气
								</view>
								<view v-show="temperature > 59">
									设备温度过高 无法获得元气
								</view>
							</view>
						</view>
					</view>
					<view class="propData">
						<view class="vitality">
							<text>本次积累元气</text>
							<image src="/static/ble/vitality.png" mode=""></image>
							<!-- <text>+{{vitalityData.current_score}}</text> -->
							<u-count-to :start-val="vitalityNumberStart" :end-val="vitalityData.total_score"
								:duration="2000" :decimals="2" :useEasing="false"></u-count-to>
						</view>
						<view class="animateV">
							<view :class="vitalityAnimateType ? 'vitalityAnimation' : ''"></view>
						</view>
						<u--image class="contImg" src="/static/ble/pageImg/1.gif" width="650rpx" height="720rpx">
						</u--image>
						<!-- 		<u--image class="contImg" src="/static/ble/pageImg/highTemperatures.png" width="390rpx"
									height="460rpx"></u--image> -->
						<view class="propName">
							{{vitalityData.name}}#{{vitalityData.number}}
						</view>
					</view>
					<view class="bottomCont">
						<!-- <view class="contBtn">
								本次使用时长 {{totalTime}}
							</view> -->
						<view class="propPs">
							温馨提示：使用超过30分钟才能增加经验值噢
						</view>
					</view>
				</view>
			</u-popup>

		</view>
		<u-popup ref="centerDrapBox" :closeOnClickOverlay="false" :show="centerDrapBoxType" overlayOpacity="0.8"
			bgColor="transparent" mode="center" @close="centerDrapBoxType = false">
			<view class="centerDrapBoxType" v-if="vitalityDataEnd">
				<view class="name">
					使用结束
				</view>
				<view class="time">
					共用时：{{vitalityDataEnd.massage_duration}}min
				</view>
				<u--image class="contImg" src="/static/ble/vitality1.png" width="242rpx" height="242rpx">
				</u--image>
				<view class="num">
					+<u-count-to :start-val="0" color="#8DD3F5" fontSize="36" :end-val="vitalityDataEnd.total_score"
						:duration="2000" :decimals="2" :useEasing="false"></u-count-to>
				</view>
				<view class="progressBars" v-if="Number(vitalityDataEnd.massage_duration) >= 30">
					<u--image class="progressBarsImg" src="/static/ble/experience.png" width="64rpx" height="64rpx">
					</u--image>
					<view class="progress">
						<u-line-progress height="18"
							:percentage="Math.round(vitalityDataEnd.experience / vitalityDataEnd.max_experience * 10000) / 100.00"
							:showText="false" :activeColor="'linear-gradient(90deg, #89D1F5 0%, #C4EFFA 100%)'" />
						<view class="progressName" v-if="vitalityDataEnd.max_experience">
							经验值{{vitalityDataEnd.experience}}/{{vitalityDataEnd.max_experience}}
						</view>
						<view class="progressName" v-else>
							等级已满
						</view>
					</view>
				</view>
				<view class="button" @click="onMessageComplete()">
					完成使用
				</view>
				<!-- <view class="">
					<view class="">
						<view class="">
							<view class="">
								<u--image class="contImg" src="/static/ble/vitality1.png" width="242rpx" height="242rpx">
								</u--image>
							</view>
							<view class="">
								能量不足
							</view>
						</view>
						<view class="">
							<view class="">
								能量不足按摩将无法获得元气
							</view>
							<view class="">
								前往睡眠中心完成早睡打卡补充能量
							</view>
						</view>
					</view>
					<view class="">
						<view class="">
							前往睡眠
						</view>
					</view>
				</view> -->
			</view>
		</u-popup>
		<u-popup ref="centerDrapBoxT" :show="centerDrapBoxTypeT" round="20" mode="center" :closeOnClickOverlay="false"
			@close="centerDrapBoxTypeT = false">
			<view class="notBuckled">
				<view class="notBuckledImg">
					<image class="imgs" src="/static/ble/notBuckled.png" mode=""></image>
				</view>
				<view class="notBuckledFont">
					<view class="title">
						设备未扣合
					</view>
					<view class="text">
						设备未扣合，已无法正常使用，请参照上图正确扣合好设备再正常使用
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup ref="propsUpgrade" :show="propsUpgrade" :closeOnClickOverlay="false" round="20" mode="bottom"
			@close="onClose()">
			<view class="propsUpgrade" v-if="datasIn">
				<view class="upgradeName">
					道具升级
				</view>
				<view class="upgrade">
					<view class="upgrades" v-if="datasIn.currently_level_info">
						<view class="grade">
							LV{{datasIn.currently_level_info.level}}
						</view>
						<view class="upgradeImg">
							<u--image class="img" :src="datasIn.currently_level_info.image" width="196rpx"
								height="228rpx"></u--image>
						</view>
						<view class="energy">
							<view class="energyNum" v-if="datasIn.currently_level_info.power">
								能量：{{datasIn.currently_level_info.power}}
							</view>
							<view class="energyFont">
								{{datasIn.currently_level_info.give ? '可转赠' : '不可转赠'}}
							</view>
						</view>
					</view>
					<view class="nextStep" v-if="datasIn.upgrade_level_info">
						<u--image class="img" src="/static/ble/pageImg/nextStep.png" width="52rpx" height="48rpx">
						</u--image>
					</view>
					<view class="upgrades" v-if="datasIn.upgrade_level_info">
						<view class="grade">
							LV{{datasIn.upgrade_level_info.level}}
						</view>
						<view class="upgradeImg">
							<u--image class="img" :src="datasIn.upgrade_level_info.image" width="196rpx"
								height="228rpx"></u--image>
						</view>
						<view class="energy">
							<view class="energyNum" v-if="datasIn.upgrade_level_info.power">
								能量：{{datasIn.upgrade_level_info.power}}
							</view>
							<view class="energyFont">
								{{datasIn.upgrade_level_info.give ? '可转赠' : '不可转赠'}}
							</view>
						</view>
					</view>
				</view>
				<view class="propIn" v-if="datasIn.currently_level_info">
					<view class="propFont">
						升级道具：
					</view>
					<view class="props" style="margin-right: 20rpx;">
						<u--image class="images" src="/static/ble/vitality.png" width="44rpx" height="44rpx"></u--image>
						<view class="numbers">
							{{datasIn.currently_level_info.score}}
						</view>
					</view>
					<view class="props" v-if="datasIn.currently_level_info.store">
						<u--image class="images" src="/static/ble/yuanshi.png" width="44rpx" height="44rpx"></u--image>
						<view class="numbers">
							{{datasIn.currently_level_info.store}}
						</view>
					</view>
				</view>
				<view class="buttons" v-if="datasIn.upgrade_level_info">
					<view class="buttonCancel" @tap="onClose()">
						我再想想
					</view>
					<view class="buttonConfirm" @tap="onUpgradeSuccess()">
						确认升级
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup ref="upgradeSuccess" :closeOnClickOverlay="false" :show="upgradeSuccess" overlayOpacity="0.8"
			round="20" mode="center" @close="upgradeSuccess = false">
			<view class="upgradeSuccess">
				<view class="titles">
					<view class="titlesFont" v-if="datasIn">
						恭喜您的{{datasIn.name}}#{{datasIn.number}}
					</view>
					<view class="titlesFont" v-if="datasIn.upgrade_level_info">
						{{upgradeType == '1' ? `已升级到${datasIn.upgrade_level_info.name}`: `耐久已增加${time}`}}
					</view>
					<!-- <view class="titlesFont" v-if="datasIn.upgrade_level_info">
						{{upgradeType == '1' ? `已升级到${datasIn.upgrade_level_info.name}`: `有效期已延长${time}天`}}
					</view> -->
				</view>
				<u--image class="images" src="/static/ble/pageImg/highTemperatures.png" width="218rpx" height="256rpx">
				</u--image>
				<view class="btns" @tap="onCloseSuccess()">
					完成{{upgradeType == '1' ? `升级`: `维修`}}
				</view>
			</view>
		</u-popup>
		<u-popup ref="promptBox" :show="promptBox" overlayOpacity="0.8" round="20" mode="center"
			@close="promptBox = false">
			<view class="promptBox">
				<view class="titles">
					{{prompt.title}}
				</view>
				<view class="promptText" v-if="prompt.textOne">
					<view class="text">
						{{prompt.textOne}}
					</view>
					<view class="texts" v-if="prompt.textTwo">
						{{prompt.textTwo}}
					</view>
				</view>
				<view class="btns" @tap="onPromptFunction(prompt.id, prompt.pageUrl)">
					{{prompt.btnFont}}
				</view>
			</view>
		</u-popup>
		<u-popup ref="repairBox" :show="repairBox" :closeOnClickOverlay="false" overlayOpacity="0.8" round="20"
			mode="center" @close="repairBox = false">
			<view class="repairBox">
				<view class="titles">
					增加耐久
				</view>
				<view class="days">
					<view class="daysFont">
						选择增加数值：
					</view>
					<u-number-box :step="0.01" :min="0.01" :asyncChange="false" :disabled="stateTypeButton" :stateInitialization="false" :value="time" @change="onChange" decimal-length="2" ></u-number-box>
					<!-- <view class="daysInput">
						<input type='tel' pattern='\d*' v-model="time" />
					</view> -->
				</view>
				<!-- <view class="infos" v-if="time"></view> -->
				<view class="buttons">
					<view class="buttonCancel" @tap="onClose()">
						我再想想
					</view>
					<view class="buttonConfirm" @tap="onServicee()">
						确认延长
					</view>
				</view>
				<view class="repairPs" v-if="datasIn.grade">
					<!-- 预计消耗元气：{{(Math.floor(((Number(datasIn.grade.buy_durable)) * (Number(time))) * 100)/100).toFixed(2) || 0}} -->
					预计消耗元气：{{(Math.floor(Number(datasIn.grade.buy_durable)) * (Number(time))) || 0}}
				</view>
			</view>
		</u-popup>
		<u-popup ref="consoleExit" :show="consoleExit" :closeOnClickOverlay="false" overlayOpacity="0.8" round="20"
			mode="center" @close="consoleExit = false">
			<view class="consoleExit">
				<view class="promptText">
					<view class="text">
						结束使用后设备将同步关闭
					</view>
					<view class="texts">
						并结算本次获得元气
					</view>
				</view>
				<view class="btns">
					<view class="btns__one" @tap="onConsoleExit()">
						确定结束
					</view>
					<view class="btns__two" @tap="onConsoleSuccess()">
						继续使用
					</view>
				</view>
				<view class="propPs" v-if="vitalityData.totalTime < 1800">
					注：本次使用未满30分钟，无法获得经验值
				</view>
			</view>
		</u-popup>
		<u-popup ref="tipsBox" :show="tipsBox" overlayOpacity="0.8" round="20" mode="center">
			<view class="tipsBox">
				<view class="titles">
					{{prompt.title}}
				</view>
				<view class="promptText">
					<view class="text">
						{{prompt.textOne}}
					</view>
					<view class="texts">
						{{prompt.textTwo}}
					</view>
				</view>
				<view class="btnView">
					<view class="btns" @tap="onTips('cancel')">
						{{tipsFont.textOne}}
					</view>
					<view class="btns highlight" @tap="onTips('success')">
						{{tipsFont.textTwo}}
					</view>
				</view>

			</view>
		</u-popup>
		<u-popup ref="cozyTips" :show="cozyTips" overlayOpacity="0.8" round="20" mode="center"
			@close="cozyTips = false">
			<view class="cozyTips">
				<view class="titles">
					<u--image class="images" src="/static/ble/tipsIcon.png" width="37rpx" height="37rpx">
					</u--image><text>温馨提示</text>
				</view>
				<view class="promptText">
					<view class="text">
						<view class="textIcon"></view>
						<view class="textFont">
							为保证数据传输，使用期间请保持应用在界面内
						</view>
					</view>
					<view class="text">
						<view class="textIcon"></view>
						<view class="textFont">
							若温度过低持续约10分钟，硬件设备将自动关闭
						</view>
					</view>
					<view class="text">
						<view class="textIcon"></view>
						<view class="textFont">
							若意外关闭APP，可重新打开小镇APP重连
						</view>
					</view>
					<view class="text">
						<view class="textIcon"></view>
						<view class="textFont">
							未使用满30分钟，将不增加经验值
						</view>
					</view>
					<!-- <rich-text :nodes="`${popupData.text}`"></rich-text> -->
				</view>
				<view class="btnView">
					<view class="buttonConfirm" @tap="onCozyTips">
						我知道了
					</view>
				</view>
				<view class="cozyTipsFont" @tap="onCozyTipsIn">
					<u-icon name="checkmark-circle" :color="tipsCacheState.cozyTypeState ? '#2979ff' : '#d9d9d9'" size="20"></u-icon>
					<view>下次不再提示我</view>
				</view>
			</view>
		</u-popup>
		<!-- 前往续期 -->
		<u-popup ref="renewalShow" :show="renewalShow" overlayOpacity="0.8" round="20" mode="center" :closeOnClickOverlay="false">
			<view class="renewalShow">
				<view class="closeImg" @tap="onRenewalTips">
					<u--image class="images" src="/static/ble/closeIcon.png" width="44rpx" height="44rpx">
					</u--image>
				</view>
				<view class="titles">
					<u--image class="images" src="/static/ble/tipsIcon.png" width="37rpx" height="37rpx">
					</u--image><text>续期提示</text>
				</view>
				<view class="promptText">
					<view class="text" v-for="(item, index) in popupData" :key="index">
						<view class="textIcon"></view>
						<view class="textFont">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="btnView">
					<view class="buttonConfirm" @tap="onRenewalGoto(12)">
						继续前往续期
					</view>
				</view>
				<view class="cozyTipsFont" @tap="onRenewalTypeStateTipsIn">
					<u-icon name="checkmark-circle" :color="tipsCacheState.renewalTypeState ? '#2979ff' : '#d9d9d9'" size="20"></u-icon>
					<view>下次不再提示我</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isShowService" ref="isShowService" round="10" mode="center" @close="isShowService = false">
			<view class="my-popup">
				<view class="text-center f-xl m-b-10 bold">联系我们</view>
				<view class="f-base text-center grey grey m-b-20">扫描下方二维码联系客服<br>
					我们将第一时间与您取得联系
				</view>
				<view class="text-center m-b-20">
					<image class="service-img" :src="configData.service_image" @longpress="saveImage"></image>
				</view>
				<view class="text-center grey f-xxs">长按保存图片</view>
				<u-icon name="close-circle" color="white" size="34" class="close" @click="isShowService = false">
				</u-icon>
			</view>
		</u-popup>
		<!-- 前往续期 -->
		<u-popup ref="renewalOrder" :show="renewalOrder" overlayOpacity="0.8" round="20" mode="center" :closeOnClickOverlay="false">
			<view class="renewalOrder">
				<view class="closeImg" @tap="renewalOrder = false;orderNumber = ''; renewalMessage=''">
					<u--image class="images" src="/static/ble/closeIcon.png" width="44rpx" height="44rpx">
					</u--image>
				</view>
				<view class="titles">
					<u--image class="images" src="/static/ble/timeIcon.png" width="37rpx" height="37rpx">
					</u--image><text>道具续期</text>
				</view>
				<view class="promptInput">
					<view class="inputs">
						<u--input placeholder="请输入有赞订单号(确认订单1天后生效)" clearable border="none" v-model="orderNumber" 
						placeholderStyle="color: #d0d1d7; font-size: 26rpx;" @clear="onClearable()" @change=""
						customStyle="color: #d0d1d7;"></u--input>
					</view>
					<view class="tipsFont" v-if="renewalMessage">
						{{renewalMessage}}
					</view>
				</view>
				<view class="btnView">
					<view class="buttonConfirm" :class="orderNumber ? 'buttonSuccess' : 'buttonError'" @tap="onRenewalGoto(13)">
						确认
					</view>
				</view>
				<view class="renewalFont">
					注：若没有购买艾条请<text @tap="onExtranetPage">前往有赞</text>购买
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		buy_durable,
		detailsr,
		upgrade,
		massageRun,
		massageEnd,
		massageDetails,
		getConfigApi,
		renewal
	} from '@/api/bluetooth.js'
	import {
		pop_up
	} from '@/api/collection.js'
	import {
		saveImg
	} from '@/utility/download.js'
	export default {
		components: {},
		props: {
			//道具ID
			id: {
				type: [Number, String],
				default: function() {
					return 0
				}
			},
			datasIn: {
				type: Object,
				default: function() {
					return {}
				}
			},
			//设备温度
			temperature: {
				type: [Number, String],
				default: function() {
					return 0
				}
			},
			//页面进入温度
			pageTime: {
				type: [Number, String],
				default: function() {
					return 0
				}
			},
		},
		data() {
			return {
				time: 0.01, //延长天数
				downDrapBoxType: false, //元气显示
				centerDrapBoxType: false, //使用结束
				centerDrapBoxTypeT: false, //设备未扣合
				propsUpgrade: false, //道具升级
				upgradeSuccess: false, //升级成功
				promptBox: false, //升级提示
				repairBox: false, //维修输入
				tipsBox: false, //提示框
				upgradeType: '', //弹框类型  1. 升级成功  2.维修成功
				consoleExit: false, //控制台退出
				cozyTips: false, //温馨提示
				renewalShow: false,//续期提示
				renewalOrder: false,//续期订单
				prompt: { //提示框配置项
					title: '',
					textOne: '',
					textTwo: '',
					btnFont: '确定',
					id: 0,	//回调场景ID 1 关闭弹框
					pageUrl: ''//使用页面
				},
				vitalityData: {}, //硬件元气Data
				vitalityDataEnd: {}, //硬件结束后元气Data
				totalTime: '', //使用*总时长
				vitalityNumberStart: '', //元气值初始值
				numberList: ['0'], //元气值数组对比
				vitalityAnimateType: false, //元气增加动画
				closeType: '', //判断退出方式 1.左上角返回 2.关机返回
				tipsFont: { //双选按钮提示
					textOne: '',
					textTwo: ''
				},
				tipsCacheState: { //不再提示缓存
					cozyTypeState: false,//温馨提示下次是否弹出
					renewalTypeState: false//续期提示下次是否弹出
				},
				environment: '', //判断是从哪个页面进入
				indexState: 1, //只需要执行一次方法 第二次不执行
				typeArray: [],//元气硬件挡位数组对比
				stateTypeButton: false,//是否禁用耐久增加按钮
				configData: '',//联系二维码
				isShowService: false,//联系我们弹框
				popupData: {},//续期提示
				orderNumber: '',//续期订单
				renewalData: {},//续期接口数据
				renewalMessage: ''//续期失败文案
			}
		},
		onShow() {

		},
		onLoad() {

		},
		mounted() {
			this.getConfig()
			//道具详情页  若用户添加的耐久值+道具现有耐久值>=道具最大耐久值 则禁用按钮
			setTimeout(()=>{
				if(this.datasIn.grade){
					this.stateTypeButton = ((Number(this.datasIn.grade.buy_durable) + (Number(this.time))) >= Number(this.datasIn.max_durable))
					console.log((Number(this.datasIn.grade.buy_durable) + (Number(this.time))))
					this.$forceUpdate()
				}
			}, 300)
		},
		methods: {
			//续期订单点击清除
			onClearable(){
				this.renewalMessage = ''
			},
			/**
			 * 点击单选按钮后续操作
			 * @param {Number} id	回调场景ID 1 关闭弹框
			 * @param {String} url 	使用页面
			 */
			onPromptFunction(id, url){
				console.log(id, url)
				switch (url){
					case 'examplePopup':
						if(id == 1){
							this.onClose();
						} else if(id == 2){
							this.onClose();
							this.$emit('close')
						}
						break;
					case 'propDetails':
					case 'search':
					case 'components':
						this.$emit('prompt', id)
						break;
					default:
						break;
				}
			},
			//从后台获取续期提示
			async onPopup() {
				try {
					const res = await pop_up({
						id: 13
					})
					this.popupData = res.data
					this.renewalShow = true
				} catch (e) {
					//TODO handle the exception
				}
			},
			//企业二维码
			async getConfig() {
				try {
					const res = await getConfigApi()
					this.configData = res.data
				} catch (e) {
					//TODO handle the exception
				}
			},
			//长按保存
			saveImage() {
				saveImg(this.configData.service_image)
			},
			//前往续期页面外链
			onExtranetPage() {
				this.onClose();
				this.orderNumber = ''
				uni.navigateTo({
					url:`/pages/town/extranetPage?url=${this.datasIn.jump_url}`
				})
			},
			//结束下滑坐标
			end(e) {
				if (e.changedTouches[0].clientY > 50) {
					this.onSwitch(1, 'close')
				}
			},
			//判断下次是否提示温馨提示框
			onCozyTipsIn() {
				this.tipsCacheState.cozyTypeState = !this.tipsCacheState.cozyTypeState
			},
			//温馨提示按钮点击
			onCozyTips() {
				this.cozyTips = false
				uni.setStorageSync('cozyTypeState', this.tipsCacheState.cozyTypeState)
				this.onSwitch(1, 'open')
			},
			//判断下次是否提示续期提示框
			onRenewalTypeStateTipsIn() {
				this.tipsCacheState.renewalTypeState = !this.tipsCacheState.renewalTypeState
			},
			//续期提示右上角点击
			onRenewalTips() {
				this.onSwitch(12, 'close')
				uni.setStorageSync('renewalTypeState', this.tipsCacheState.renewalTypeState)
			},
			//续期提示按钮点击
			async onRenewalGoto(type) {
				switch (type){
					case 12:
						uni.setStorageSync('renewalTypeState', this.tipsCacheState.renewalTypeState)
						break;
					case 13:
						if(!this.orderNumber) return false
						try {
							const renewalInfo = await renewal({
								hardware_id: this.id,
								order: this.orderNumber
							})
							this.renewalMessage = ''
							this.onClose()
							this.onPrompt(true, '提示', `恭喜，您已成功续期${renewalInfo.data.day}天`, `能量恢复${renewalInfo.data.power}个`, 2, 'examplePopup')
						} catch (e) {
							this.renewalMessage = e.message
						}
						return false
						break;
				}
				this.onExtranetPage();
			},
			//多选按钮
			onTips(type) {
				this.$emit(type)
			},
			onConsoleSuccess() {
				this.consoleExit = false
				this.$emit('onClear', false)
			},
			//结束使用返回页面
			onConsoleExit() {
				this.consoleExit = false
				uni.showLoading()
				if (this.closeType == 1) {
					this.$emit('consoleExit')
				} else {
					this.$emit('onClear', true)
				}
			},
			//获取当前退出判断值
			onClearType(type) {
				this.closeType = type
			},
			//完成使用
			onMessageComplete() {
				console.log('environment4', this.environment)
				if (this.environment == 'index') {
					this.onSwitch(2, 'close')
				} else {
					this.$emit('messageComplete')
					uni.navigateBack()
				}
			},
			//升级
			async onUpgradeSuccess() {
				uni.showLoading()
				try {
					const resUserinfo = await upgrade({
						hardware_id: this.id
					})
					uni.hideLoading()
					this.onClose()
					this.upgradeSuccess = true
					this.upgradeType = '1'
				} catch (e) {
					uni.hideLoading()
					this.onClose()
					this.onPrompt(true, '提示', e.message,'', 2, 'examplePopup')
				}
			},
			onChange(e){
				console.log('value',e)
				this.time = e.value
			},
			//维修
			async onServicee() {
				uni.showLoading()
				try {
					const resUserinfo = await buy_durable({
						hardware_id: this.id,
						durable_num: this.time
					})
					uni.hideLoading()
					this.onClose()
					this.upgradeSuccess = true
					this.upgradeType = '2'
				} catch (e) {
					uni.hideLoading()
					this.onClose()
					this.onPrompt(true, '提示', e.message,'', 1, 'examplePopup')
				}
			},
			//获取硬件元气数据
			onVitality(type, calcVitalityType) {
				console.log('接口请求')
				this.onData('run', type, calcVitalityType)
			},
			//使用结束
			onMessageEnd(type, calcVitalityType = '', environment) {
				console.log('environment1', environment)
				console.log('environment2', environment != '')
				if (environment != '') {
					this.environment = environment
					console.log('environment3', this.environment)
				}
				this.onData('end', type, calcVitalityType, environment)
			},
			/**
			 * @param {String} api  判断是调用使用中还使用结束接口
			 * @param {String} type 获取当前设备挡位
			 * @param {Boolean} calcVitalityType 告诉后端是否需要计算元气
			 * @param {String} environment 判断环境是从哪儿进入方法
			 */
			async onData(api, type, calcVitalityType, environment) {
				let _this = this
				try {
					let data = {
						massage_id: _this.id,
						massage_mode: type || '',
						is_normal: calcVitalityType
					},param = {
						data: _this.$rsa.rsaEncrypt(JSON.stringify(data)),
						timestamp: _this.$rsa.nowTime(),
						nonce: _this.$rsa.randomString(16)
					}, arr = [];
					if (api == 'run') {
						const datas = await massageRun(
							Object.assign(param, {
								sign: _this.$rsa.onRsaSign(param)
							})
						)
						console.log('residue', datas)
						//元气值数字滚动对比 并显示元气增加动画
						_this.numberList.length <= 2 && _this.numberList.push(datas.data.total_score)
						if (_this.numberList.length == 2) {
							if (_this.numberList[0] != _this.numberList[1]) {
								_this.vitalityAnimateType = true
								setTimeout(() => {
									_this.vitalityNumberStart = _this.numberList[0]
								}, 3000)
								this.$forceUpdate()
							}
							_this.numberList[0] = _this.numberList[1];
							_this.numberList.shift();
							if (_this.vitalityAnimateType) {
								setTimeout(() => {
									_this.vitalityAnimateType = false
									this.$forceUpdate()
								}, 3500)
							}
						}
						const residue = datas.data.last_run_time - datas.data.start_time
						// const time = residue % 3600
						// const timein = Math.floor(time / 60)
						_this.vitalityData = {
							...datas.data,
							totalTime: residue
						}
						//若挡位切换或切换失败 重新计算剩余时长
						_this.typeArray.push(type)
						console.log('typeArray',_this.typeArray)
						if(_this.typeArray.length == 2){
							// if(_this.typeArray[0] != _this.typeArray[1]){
								_this.$emit('vitalityData', _this.vitalityData)
							// }
							_this.typeArray.shift();
						}
						if(_this.indexState == 1){
							_this.$emit('vitalityData', _this.vitalityData)
							_this.indexState = 2
						}
						_this.$emit('stateIndex', 0)
						console.log('接口请求成功')
					} else {
						uni.showLoading()
						const datas = await massageEnd(
							Object.assign(param, {
								sign: _this.$rsa.onRsaSign(param)
							})
						)
						this.onClose();
						this.vitalityDataEnd = datas.data
						if (environment == 'index') {
							this.onSwitch(9, 'close')
						}
						console.log('datasEnd', datas)
						uni.hideLoading()
						this.onSwitch(2, 'open')
						return false
					}
				} catch (err) {
					console.log(err)
					console.log('api', api)
					if (environment != 'index') {
						//使用结束
						if(err.code == '10058'){
							this.onFailedEnd();
						} else {
							console.log('进入错误增加')
							this.$emit('onClearTime')
						}
						// this.onClose()
						// uni.showToast({
						// 	title: '接口调用失败，正在尝试重新连接~',
						// 	duration: 3000,
						// 	icon: 'none'
						// })
					} else {
						this.onClose()
						uni.showToast({
							title: err.message,
							duration: 3000,
							icon: 'none'
						})
					}

					// clearInterval(_this.timeMessage)
				}
			},
			//当使用已经异常结束后获使用记录数据
			async onFailedEnd(){
				let _this = this
				try {
					let data = {
						massage_id: _this.id
					}
					uni.showLoading()
					const datas = await massageDetails(data)
					this.vitalityDataEnd = datas.data
					if (environment == 'index') {
						this.onSwitch(9, 'close')
					}
					console.log('datasEnd', datas)
					this.onClose();
					uni.hideLoading()
					this.onSwitch(2, 'open')
					return false
				} catch (err) {
					this.onClose()
					uni.showToast({
						title: err.message,
						duration: 3000,
						icon: 'none'
					})
				}
			},
			//重新初始化indexState
			onIndexState(){
				this.indexState = 1
			},
			//消息弹框
			onPrompt(type, title, message, text, id, page) {
				this.promptBox = type
				this.prompt.title = title
				this.prompt.textOne = message
				this.prompt.textTwo = text
				this.prompt.id = id
				this.prompt.pageUrl = page
				console.log(this.prompt)
			},
			//提示弹框
			onTipsrunt(type, message, text, tipsFont, title) {
				this.tipsBox = type
				this.prompt.textOne = message
				this.prompt.textTwo = text
				this.tipsFont = tipsFont
				this.prompt.title = title
			},
			/**
			 * @param {Object} status		1.元气弹框 2.使用结束弹框 3.设备未扣合弹框 4.道具升级弹框 5.升级成功弹框
			 *   6.升级提示弹框 7.维修弹框 8.控制台弹框 9.多选按钮提示框 10.温馨提示框 11.客服二维码 12.续期弹框 13.续期订单弹框
			 * @param {Object} switchTypes	open 开启  close 关闭
			 */
			onSwitch(status, switchTypes) {
				console.log(1111, status, switchTypes)
				const actions = this.onListMap();
				let action = [...actions].filter(([key, value]) => (key.switchTypes == switchTypes && key.status ==
					status))
				action.forEach(([key, value]) => value.call(this))
			},
			//关闭所有弹框
			onClose() {
				this.downDrapBoxType = false
				this.centerDrapBoxType = false
				this.centerDrapBoxTypeT = false
				this.propsUpgrade = false
				this.upgradeSuccess = false
				this.promptBox = false
				this.repairBox = false
				this.consoleExit = false
				this.tipsBox = false
				this.cozyTips = false
				this.isShowService = false
				this.renewalShow = false
				this.renewalOrder = false
				this.$emit('showTypeFalse')
			},
			onCloseSuccess() {
				this.onClose();
				this.$emit('closeSuccess')
			},
			//本次使用时长计算
			onTotalTime(time) {
				// console.log('当前时间：', Math.floor(new Date().getTime() / 1000))
				console.log('硬件剩余时间：', this.vitalityData)
				// this.totalTime = this.totalDuration(Math.floor(new Date().getTime() / 1000) - this.vitalityData.start_time)
				this.totalTime = this.totalDuration(this.vitalityData.remaining_time += 1)
			},
			//总共使用时长
			totalDuration(time) {
				// 转换为式分秒
				let m = parseInt(time / 60 % 60)
				m = m < 10 ? '0' + m : m
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s : s
				return `${m} : ${s}`
			},
			onListMap() {
				const actions = new Map([
					[{
						switchTypes: 'close',
						status: 1
					}, () => {
						this.downDrapBoxType = false
					}],
					[{
						switchTypes: 'open',
						status: 1
					}, () => {
						this.downDrapBoxType = true
					}],
					[{
						switchTypes: 'close',
						status: 2
					}, () => {
						this.centerDrapBoxType = false
					}],
					[{
						switchTypes: 'open',
						status: 2
					}, () => {
						this.centerDrapBoxType = true
					}],
					[{
						switchTypes: 'close',
						status: 3
					}, () => {
						this.centerDrapBoxTypeT = false
					}],
					[{
						switchTypes: 'open',
						status: 3
					}, () => {
						this.centerDrapBoxTypeT = true
					}],
					[{
						switchTypes: 'close',
						status: 4
					}, () => {
						this.propsUpgrade = false
					}],
					[{
						switchTypes: 'open',
						status: 4
					}, () => {
						this.propsUpgrade = true
					}],
					[{
						switchTypes: 'close',
						status: 5
					}, () => {
						this.upgradeSuccess = false
					}],
					[{
						switchTypes: 'open',
						status: 5
					}, () => {
						this.upgradeSuccess = true
					}],
					[{
						switchTypes: 'close',
						status: 6
					}, () => {
						this.promptBox = false
					}],
					[{
						switchTypes: 'open',
						status: 6
					}, () => {
						this.promptBox = true
					}],
					[{
						switchTypes: 'close',
						status: 7
					}, () => {
						this.repairBox = false
					}],
					[{
						switchTypes: 'open',
						status: 7
					}, () => {
						this.repairBox = true
					}],
					[{
						switchTypes: 'close',
						status: 8
					}, () => {
						this.consoleExit = false
					}],
					[{
						switchTypes: 'open',
						status: 8
					}, () => {
						this.consoleExit = true
					}],
					[{
						switchTypes: 'close',
						status: 9
					}, () => {
						this.tipsBox = false
					}],
					[{
						switchTypes: 'open',
						status: 9
					}, () => {
						this.tipsBox = true
					}],
					[{
						switchTypes: 'close',
						status: 10
					}, () => {
						this.cozyTips = false
					}],
					[{
						switchTypes: 'open',
						status: 10
					}, () => {
						this.cozyTips = true
					}],
					[{
						switchTypes: 'close',
						status: 11
					}, () => {
						this.isShowService = false
					}],
					[{
						switchTypes: 'open',
						status: 11
					}, () => {
						this.isShowService = true
					}],
					[{
						switchTypes: 'close',
						status: 12
					}, () => {
						this.renewalShow = false
					}],
					[{
						switchTypes: 'open',
						status: 12
					}, () => {
						this.renewalShow = true
					}],
					[{
						switchTypes: 'close',
						status: 13
					}, () => {
						this.renewalOrder = false
					}],
					[{
						switchTypes: 'open',
						status: 13
					}, () => {
						this.renewalOrder = true
					}]
				])
				return actions
			},
			onSubmit(type) {},
		}
	}
</script>

<style lang="scss" scoped>
	forwards {
		@keyframes vitality_animation {
			0% {
				opacity: 0;
				transform: translate3d(0rpx, 0rpx, 0rpx);
			}

			25% {
				opacity: 1;
				transform: translate3d(10rpx, -70rpx, 0px);
			}

			100% {
				opacity: 1;
				transform: translate3d(30rpx, -70rpx, 0px);
			}

			100% {
				opacity: 0;
				transform: translate3d(130rpx, -180rpx, 20rpx);
			}
		}
	}
	.my-popup {
		width: 590rpx;
		box-sizing: border-box;
		padding: 45rpx 65rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 20rpx;
	
		.attested-icon {
			width: 174rpx;
			height: 174rpx;
		}
	
		.service-img {
			width: 269rpx;
			height: 269rpx;
		}
	
		.close {
			position: absolute;
			bottom: -90rpx;
			left: 50%;
			transform: translateX(-50%);
			opacity: 0.8;
		}
	}
	.equipmentBck {
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		transition: all .5s;

		.text {
			margin-left: 16rpx;
		}
	}

	.equipmentBckWarning {
		background-color: #fdf6ec;
		color: #f9ae3d;
	}

	.equipmentBckError {
		background-color: #fef0f0;
		color: #f56c6c;
	}

	.cozyTips {
		padding: 60rpx 58rpx 36rpx;
		width: 500rpx;

		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text{
				margin-left: 20rpx;
			}
		}

		.promptText {
			.text {
				display: flex;
				line-height: 44rpx;
				margin-bottom: 16rpx;
				.textIcon{
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #92bcd2;
					margin: 18rpx 20rpx 0 0;
				}
				.textFont{
					font-size: 27rpx;
					width: 90%;
				}
			}
		}

		.btnView {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 52rpx 0 40rpx;

			.buttonConfirm {
				padding: 28rpx 0rpx;
				color: #FFFFFF;
				background: #5CC9FF;
				border-radius: 100rpx;
				border: 2rpx solid #5CC9FF;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				letter-spacing: 2rpx;
			}
		}

		.cozyTipsFont {
			display: flex;
			justify-content: center;
			font-size: 26rpx;
			view{
				margin-left: 15rpx;
				color: #14161B;
			}
		}

	}
	.renewalShow {
		padding: 20rpx 63rpx 40rpx 63rpx;
		width: 500rpx;
		position: relative;
		.closeImg{
			display: flex;
			justify-content: flex-end;
			position: absolute;
			right: 20rpx;
		}
		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin: 49rpx 0 59rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text{
				margin-left: 20rpx;
			}
		}
	
		.promptText {
			.text {
				display: flex;
				line-height: 44rpx;
				margin-bottom: 16rpx;
				.textIcon{
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #92bcd2;
					margin: 18rpx 20rpx 0 0;
				}
				.textFont{
					font-size: 27rpx;
					width: 90%;
				}
			}
		}
	
		.btnView {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 52rpx 0 40rpx;
	
			.buttonConfirm {
				padding: 28rpx 0rpx;
				color: #FFFFFF;
				background: #5CC9FF;
				border-radius: 100rpx;
				border: 2rpx solid #5CC9FF;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				letter-spacing: 2rpx;
			}
		}
	
		.cozyTipsFont {
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			view{
				margin-left: 15rpx;
				color: #14161B;
			}
		}
	
	}
	.renewalOrder {
		padding: 20rpx 63rpx 40rpx 63rpx;
		width: 500rpx;
		position: relative;
		.closeImg{
			display: flex;
			justify-content: flex-end;
			position: absolute;
			right: 20rpx;
		}
		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin: 49rpx 0 59rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			text{
				margin-left: 20rpx;
			}
		}
		.promptInput{
			.inputs{
				border-radius: 40px;
				border: 1px solid #d0d1d7;
				padding: 10px;
			}
			.tipsFont{
				color:#f00;
				font-size: 24rpx;
				text-align:center;
				margin-top: 20rpx;
			}
		}
		
	
		.btnView {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 28rpx 0 40rpx;
			.buttonSuccess{
				color: #FFFFFF;
				background: #5CC9FF;
			}
			.buttonError{
				background:#a9ddf8;
				color: #f8fcfe;
			}
			.buttonConfirm {
				padding: 28rpx 0rpx;
				border-radius: 100rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				letter-spacing: 2rpx;
			}
		}
		.renewalFont{
			color:#b7b8b9;
			font-size: 24rpx;
			text-align:center;
			text{
				letter-spacing: 2rpx;
				color:#3EA1E4!important;
				text-decoration-line: underline;
			}
		}
	}
	.animateV {
		position: relative;
		margin: auto;
		width: 30px;
		height: 30px;
		top: 120rpx;

		.vitalityAnimation {
			width: 30px;
			height: 30px;
			background: url('/static/ble/vitality.png') no-repeat;
			background-size: cover;
			border-radius: 50%;
			opacity: 1;
			transition: all 3s;
			animation: vitality_animation 3s forwards ease-out;
			position: absolute;
			z-index: 1;
		}
	}

	.consoleExit {
		padding: 28rpx 80rpx 48rpx;
		width: 500rpx;

		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.promptText {
			font-size: 32rpx;
			margin-bottom: 42rpx;
			text-align: center;

			.text {
				margin-bottom: 24rpx;
			}
		}

		.btns {
			text-align: center;
			border-radius: 100rpx;
			margin: 0 auto 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&__one {
				background: #f7f7f7;
				color: #8e8e8e;
				border-radius: 50rpx;
				width: 45%;
				padding: 20rpx 0;
			}

			&__two {
				background: #5EB2FF;
				color: #FFFFFF;
				border-radius: 50rpx;
				width: 45%;
				padding: 20rpx 0;
			}
		}

		.notes {
			text-align: center;
			font-size: 28rpx;
			color: #b1b1b1;
		}

		.propPs {
			font-size: 26rpx;
			color: #b1b1b1;
		}
	}

	.notBuckled {
		width: 600rpx;
		overflow: hidden;
		border-top-left-radius: 36rpx;
		border-top-right-radius: 36rpx;

		.notBuckledImg {
			position: relative;
			left: -20rpx;

			.imgs {
				width: 640rpx;
				height: 450rpx;
			}
		}

		.notBuckledFont {
			padding: 32rpx 40rpx 64rpx;
			text-align: center;

			.title {
				font-weight: 700;
				font-size: 36rpx;
				color: #272D38;
				margin-bottom: 24rpx;
			}

			.text {
				font-size: 28rpx;
				color: #5B616C;
			}
		}
	}

	.repairBox {
		padding: 28rpx 58rpx 32rpx;
		width: 500rpx;

		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.days {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 60rpx;

			.daysFont {
				font-size: 28rpx;
				margin-right: 24rpx;
			}

			.daysInput {
				input {
					background: #f0f0f0;
					border-radius: 8rpx;
					width: 128rpx;
					height: 54rpx;
					padding: 6rpx 0;
					text-align: center;
				}

				input::-webkit-input-placeholder {
					/* Chrome/Opera/Safari */
					font-size: 40rpx;
					color: #c0c0c0;
				}
			}
		}

		.buttons {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 32rpx;

			.buttonCancel {
				padding: 14rpx 40rpx;
				color: #5CC9FF;
				border-radius: 100rpx;
				border: 2rpx solid #5CC9FF;
			}

			.buttonConfirm {
				padding: 14rpx 40rpx;
				color: #FFFFFF;
				background: #5CC9FF;
				border-radius: 100rpx;
				border: 2rpx solid #5CC9FF;
			}
		}

		.repairPs {
			text-align: center;
			color: #a2a2a2;
			font-size: 24rpx;
		}
	}

	.tipsBox {
		padding: 28rpx 30rpx 48rpx;
		width: 540rpx;

		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.promptText {
			font-size: 28rpx;
			margin-bottom: 72rpx;
			text-align: center;

			.text {
				margin-bottom: 24rpx;
				font-size: 36rpx!important;
				font-weight: 700;
			}
		}

		.btnView {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btns {
				background: #b0b0b0;
				color: #FFFFFF;
				padding: 14rpx 28rpx;
				text-align: center;
				border-radius: 100rpx;
				width: 160rpx;
				margin: 0 auto;
			}

			.highlight {
				background: #5EB2FF !important;
			}
		}

	}

	.promptBox {
		padding: 28rpx 100rpx 48rpx;

		.titles {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 32rpx;
		}

		.promptText {
			font-size: 28rpx;
			margin-bottom: 72rpx;
			text-align: center;

			.text {
				margin-bottom: 24rpx;
			}
		}

		.btns {
			background: #5EB2FF;
			color: #FFFFFF;
			padding: 14rpx 120rpx;
			text-align: center;
			border-radius: 100rpx;
			margin: 0 auto;
		}
	}

	.upgradeSuccess {
		padding: 28rpx 88rpx 64rpx;

		.titles {
			font-size: 40rpx;
			font-weight: 700;
			text-align: center;
			margin-bottom: 48rpx;
			
			.titlesFont {
				margin: 0 12rpx;
			}
		}

		.images {
			margin-bottom: 60rpx;
			display: flex;
			align-items: center;
		}

		.btns {
			background: #5EB2FF;
			color: #FFFFFF;
			padding: 14rpx 0;
			text-align: center;
			border-radius: 100rpx;
		}
	}

	.propsUpgrade {
		padding: 28rpx 64rpx;

		.upgradeName {
			text-align: center;
			font-size: 40rpx;
			font-weight: 700;
			margin-bottom: 46rpx;
		}

		.upgrade {
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			margin-bottom: 52rpx;

			.upgrades {
				.grade {
					text-align: center;
					background: #bde9ff;
					font-size: 20rpx;
					padding: 4rpx 16rpx;
					margin: 0 60rpx 16rpx;
					border-radius: 100rpx;
				}

				.upgradeImg {
					margin-bottom: 32rpx;
				}

				.energy {
					font-size: 28rpx;

					.energyNum {
						margin-bottom: 16rpx;
					}
				}
			}

		}

		.propIn {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #F0F4F7;
			padding: 30rpx 0;
			margin-bottom: 126rpx;
			border-radius: 100rpx;

			.propFont {
				font-size: 32rpx;
				margin-right: 16rpx;
			}

			.props:first-child {
				margin-right: 24rpx;
			}

			.props {
				display: flex;
				align-items: center;

				.images {
					margin-right: 8rpx;
				}

				.numbers {
					font-size: 28rpx;
				}
			}
		}

		.buttons {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 100rpx;
			padding: 0 30rpx;

			.buttonCancel {
				padding: 14rpx 40rpx;
				color: #5CC9FF;
				border-radius: 100rpx;
				border: 2rpx solid #5CC9FF;
			}

			.buttonConfirm {
				padding: 14rpx 40rpx;
				color: #FFFFFF;
				background: #5CC9FF;
				border-radius: 100rpx;
				border: 2rpx solid #5CC9FF;
			}
		}
	}

	.centerDrapBoxType {
		text-align: center;

		.name {
			font-size: 40rpx;
			color: #FFFFFF;
			margin-bottom: 8rpx;
		}

		.time {
			color: #AFAFAF;
			font-size: 28rpx;
			margin-bottom: 44rpx;
		}

		.contImg {
			margin-bottom: 28rpx;
			display: flex;
			align-items: center;
		}

		.num {
			font-size: 72rpx;
			color: #8DD3F5;
			margin-bottom: 74rpx;
		}

		.progressBars {
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 140rpx;

			.progressBarsImg {
				margin-right: 20rpx;
			}

			.progress {
				width: 424rpx;

				.progressName {
					position: absolute;
					top: 14rpx;
					bottom: 0;
					left: 64rpx;
					right: 0;
					font-size: 24rpx;
				}
			}
		}

		.button {
			background: #5EB2FF;
			color: #FFFFFF;
			border-radius: 100rpx;
			padding: 14rpx 150rpx;
			font-size: 36rpx;
		}
	}

	.contents {
		padding: 60rpx 46rpx 22rpx;
		background: url('/static/ble/pageImg/bg.png') no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;

		.suspension {
			position: absolute;
			top: -100rpx;
			right: 0;
			left: 0;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;

			.fonts {
				margin-right: 15rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.uIcons {
				transform: rotateZ(90deg);
			}
		}

		.progressBar {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 40rpx;

			.progressBars {
				text-align: center;

				.fontText {
					font-size: 24rpx;
					color: #616161;
					margin-bottom: 16rpx;
				}

				.progress {
					border: 2rpx solid #EDF0F6;
					border-radius: 20rpx;
					width: 236rpx;
					height: 20rpx;
				}
			}

			.progresState {
				margin-bottom: 20rpx;
				color: #eeb53f;
			}

			.progresStates {
				margin-bottom: 20rpx;
				color: #ff0500;
			}
		}

		.propData {
			margin-bottom: 40rpx;
			text-align: center;
			position: relative;

			.vitality {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 0 12rpx 0 34rpx;
				}

				text {
					font-size: 36rpx;
					color: #000000;
				}
			}

			.contImg {
				margin-bottom: 0rpx;
				display: flex;
				align-items: center;
			}

			.propName {
				font-size: 36rpx;
				color: #000000;
				margin-top: -60rpx;
			}
		}

		.bottomCont {
			.contBtn {
				background: #88c5ff;
				color: #FFFFFF;
				padding: 22rpx 0;
				width: 100%;
				margin-bottom: 24rpx;
				border-radius: 50rpx;
				text-align: center;
			}

			.propPs {
				color: #a2a2a2;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
</style>
